<template>
  <section class="product_wrap">
    <section class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
    </section>
    <section class="product_box">

      <!-- 渲染数据 -->
      <el-table :data="PermissionName" stripe style="width: 100%" row-key="id" border lazy>
        <el-table-column prop="authName" label="权限名" width="544">
        </el-table-column>
        <el-table-column prop="path" label="权限路径" width="544">
        </el-table-column>
        <el-table-column prop="level" label="权限等级" width="547">
          <template slot-scope="scope">
            <el-tag :type="scope.row.level === '一级' ? 'primary' : scope.row.level === '二级' ?'success':'warning'"
                    disable-transitions>{{scope.row.level}}
            </el-tag>
          </template>

        </el-table-column>
      </el-table>
    </section>
  </section>
</template>

<script>
  export default {
    name: 'ProductCateView',
    data() {
      return {
        PermissionName: [],
      }
    },
    async created() {
      const res = await this.$http.gitLimits()
      //console.log(res)
      this.PermissionName = res.data.data
      //console.log(this.PermissionName)

      this.PermissionName.forEach((item) => {
        if (item.level == 0) {
          item.level = '一级'
        } else if (item.level == 1) {
          item.level = '二级'
        } else {
          item.level = '三级'
        }
      })
    },
  }
</script>

<style scoped lang="scss">
  .product_wrap {
    .breadcrumb {
      margin: 10px 0 20px 0;
    }
    .product_box {
      width: 98%;
      background-color: #fff;
      box-shadow: 1px 1px 3px 4px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      overflow: hidden;
      padding: 20px 20px;
    }
  }
</style>